<template>
  <div class="property-manage">
    <h2>房产管理</h2>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="error" class="error-message">{{ error }}</div>

    <div v-if="property" class="property-card">
      <h3>{{ property.buildingName }} - {{ property.unitNumber }}</h3>
      <div class="property-details">
        <p><strong>房产 ID:</strong> {{ property.propertyId }}</p>
        <p><strong>楼层:</strong> {{ property.floor }}</p>
        <p><strong>面积:</strong> {{ property.squareFeet }} 平方英尺</p>
        <p><strong>户型:</strong> {{ property.layout }}</p>
        <p><strong>状态:</strong> {{ getStatusText(property.status) }}</p>
        <p><strong>房产证号:</strong> {{ property.propertyCertificateNumber }}</p>
        <p><strong>申请时间:</strong> {{ new Date(property.createdAt).toLocaleString() }}</p>
        <p><strong>最后更新:</strong> {{ new Date(property.updatedAt).toLocaleString() }}</p>
      </div>
    </div>

    <div v-if="!loading && !property" class="no-property">没有找到房产信息。</div>
  </div>

  <div class="property-manage">
    <h2>租赁管理</h2>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="error" class="error-message">{{ error }}</div>
    <div v-if="rent" class="property-card">
      <!-- <h3>{{ property.buildingName }} - {{ property.unitNumber }}</h3> -->
      <div class="property-details" >
        <!-- <p><strong>房产 ID:</strong> {{ property.propertyId }}</p> -->
        <!-- <p><strong>楼层:</strong> {{ property.floor }}</p> -->
        <!-- <p><strong>面积:</strong> {{ property.squareFeet }} 平方英尺</p> -->
        <p><strong>租户:</strong> {{ rent.rentId }}</p>
        <p><strong>房产证号:</strong> {{ rent.propertyCertificateNumber }}</p>
        <!-- <p><strong>状态:</strong> {{ getStatusText(property.status) }}</p> -->
        <!-- <p><strong>申请时间:</strong> {{ new Date(property.createdAt).toLocaleString() }}</p> -->
        <!-- <p><strong>最后更新:</strong> {{ new Date(property.updatedAt).toLocaleString() }}</p> -->
      </div>
    </div>

    <div v-if="!loading && !property" class="no-property">没有找到房产信息。</div>
  </div>
</template>

<script>
export default {
  name: 'PropertyManagePage',
  data() {
    return {
      property: null, // 用于存储房产信息
      rent:null,
      loading: false,
      error: null,
      baseUrl: 'http://localhost:8080/api/properties',
      ownerId: JSON.parse(localStorage.getItem('user')).ownerId, // 从登录信息中获取业主ID
      propertyId: JSON.parse(localStorage.getItem('user')).propertyId // 从登录信息中获取房产ID
    }
  },
  methods: {
    async fetchProperty() {
      this.loading = true;
      this.error = null;
      try {
        const response = await fetch(`${this.baseUrl}/${this.propertyId}`); // 假设有这个 API
        if (!response.ok) throw new Error('获取房产信息失败');
        this.property = await response.json();
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    async fetchRent() {
      this.loading = true;
      this.error = null;
      try {
        const response = await fetch(`http://localhost:8080/api/rents/rent/${this.ownerId}`);
        if (!response.ok) throw new Error('该用户无租户信息可展示');
        this.rent = await response.json();
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    getStatusText(status) {
      const statusMap = {
        'occupied': '已入住',
        'vacant': '空置',
        'under_maintenance': '维护中'
      };
      return statusMap[status] || status;
    }
  },
  created() {
    this.fetchProperty(); // 在组件创建时获取房产信息
    this.fetchRent();
  }
}

</script>



<style scoped>
.property-manage {
  padding: 20px;
}

.property-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-top: 20px;
}

.loading {
  text-align: center;
  margin: 20px 0;
  color: #666;
}

.error-message {
  color: #f5ce6c;
  text-align: center;
  margin: 20px 0;
  padding: 10px;
  background-color: #fef0f0;
  border-radius: 4px;
}

.no-property {
  text-align: center;
  color: #666;
}

.property-details {
  margin-top: 15px;
}

.property-details p {
  margin: 5px 0;
  color: #333;
}

.property-details strong {
  color: #2c3e50;
}
</style> 